<template>
  <div class="mbClass">
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name" left-arrow />
    <van-swipe class="my-swipe" :autoplay="1500" indicator-color="aqua">
      <van-swipe-item v-for="item in bannerlist" :key="item.id">
        <img class="imgUrl" :src="$imgUrl + item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :gutter="2" :border="false" :column-num="5">
      <van-grid-item v-for="item in gridlist" :key="item.id">
        <van-image :src="item.img" />
        <p class="gridTitle">{{ item.title }}</p>
      </van-grid-item>
    </van-grid>
    <!-- 商品切换 -->
    <van-tabs type="card">
      <van-tab title="热卖商品">
        <!-- 商品卡片 -->
        <van-card
          :key="item.id"
          v-for="item in hotlist"
          num="1"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="$imgUrl + item.img"
        />
      </van-tab>
      <van-tab title="最新大牌">
        <van-card
          :key="item.id"
          v-for="item in newlist"
          num="1"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="$imgUrl + item.img"
        />
      </van-tab>
      <van-tab title="商品专场">
        <van-card
          :key="item.id"
          v-for="item in goodslist"
          num="1"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="$imgUrl + item.img"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getBanner, getIndexGoods } from "../util/axios";
//单独引入axios核心库
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      bannerlist: [],
      gridlist: [
        {
          id: 1,
          title: "限时秒杀",
          img: "http://adc.skt5.top/img/7",
        },
        {
          id: 2,
          title: "畅销商品",
          img: "http://adc.skt5.top/img/10",
        },
        {
          id: 3,
          title: "品质大牌",
          img: "http://adc.skt5.top/img/8",
        },
        {
          id: 4,
          title: "小U自营",
          img: "http://adc.skt5.top/img/9",
        },
        {
          id: 5,
          title: "积分商城",
          img: "http://adc.skt5.top/img/11",
        },
      ],
      goodslist: [],
      newlist: [],
      hotlist: [],
    };
  },
  mounted() {
    axios.all([getBanner(), getIndexGoods()]).then(
      axios.spread((res1, res2) => {
        if (res1.code == 200) {
          this.bannerlist = res1.list;
        }
        if (res2.code == 200) {
          this.hotlist = res2.list[0].content;
          this.newlist = res2.list[1].content;
          this.goodslist = res2.list[2].content;
        }
      })
    );
  },
  methods: {
    async getBannerList() {
      let res = await getBanner();
      this.bannerlist = res.list ? res.list : [];
    },
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style scoped>
.item {
  width: 90%;
  margin: 10px auto;
  background: #ccc;
}
.imgUrl {
  width: 100%;
  height: 4rem;
}
.gridTitle {
  font-size: 13px;
}
.mbClass {
  margin-bottom: 60px;
}
</style>
